<template>
  <div class="chip-container" @click="OnChange" ref="chip">
    <span class="">
      <slot name="chipContent" :model="model"></slot>
    </span>
  </div>
</template>

<script>
import { ref, onMounted, toRef, toRefs, isRef, reactive } from "vue";
export default {
  setup(props, { emit }) {
    const chip = ref();
    const chipType = ref(props.chipType);
    var isOnly = false;
    let model = reactive(props.model);
    model["checked"] = false;
    /*更改chip样式变化 */
    function OnChange() {
      if (!isOnly) {
        if (!model.checked) {
          checkedStyle();
        } else {
          UnCheckedStyle();
        }
        model.checked = !model.checked;
        emitToChipList();
      } else if (model.checked) {
        UnCheckedStyle();
        model.checked = !model.checked;
        emitToChipList();
      }
    }
    /**获得·是否单选的参数 */
    function getParams(value) {
      isOnly = value;
    }

    /**选中样式 */
    function checkedStyle() {
      chip.value.style.backgroundColor = "#4598f7";
      chip.value.style.color = "white";
      chip.value.style.fontWeight = "600";
    }
    /**未选中样式 */
    function UnCheckedStyle() {
      chip.value.style.color = "#4598f7";
      chip.value.style.backgroundColor = "#ffffff";
      chip.value.style.fontWeight = "500";
    }
    /**将值传递给父组件 */
    function emitToChipList() {
      if (isRef(model.checked)) {
        emit("chipChange", model);
      } else {
        emit("chipChange", ref(model));
      }
    }

    return {
      OnChange,
      chip,
      model,
      getParams,
    };
  },
  props: ["model", "chipType", "isOnly"],
};
</script>

<style scoped>
.chip-container {
  display: flex;
  justify-content: center;
  border: 1px solid #4598f7;
  padding: 0.1rem 1rem;
  margin: 0.1rem auto;
  border-radius: 16rem;
  color: #4598f7;
  font-weight: 500;
  cursor: default;
  transition: 0.5s;
  margin: 0.3rem 0.3rem;
}
.chip-container:hover {
  background-color: #9fc7f5c7;
}
</style>
